<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
index

<div>
    <form action="testupload"  method="post" enctype="multipart/form-data">
        <input type="file" name="file"/>&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="submit" name="submit" value="submit" />
    </form>
    <p>===============</p>

    <form action="testupload2" method="post" enctype="multipart/form-data">
        <input type="file" name="uploadFiles" id="uploadFiles" multiple="multiple">

        <input type="submit" value="提交" />
    </form>
    <div id="content"></div>

</div>
<script>
    var inputElement = document.getElementById("uploadFiles");
    inputElement.addEventListener("change", handleFiles, false);

    function handleFiles(){
        var fileList = this.files;
        var dd = document.getElementById('content');
        for( var i = 0 ; i < fileList.length ; i++ ){
            dd.innerHTML += fileList[i].name+"<br>";
        }
    }
</script>
<style>
    .processbar {
        　　height: 30px;　　　　　　　  // 进度条高度
        　　width: 30%;　　　　　　　　// 进度条宽度
        　　border: 4px solid gold;        // 进度条边框
    　　background-color: red;　　  // 整个进度条背景色
        　　color: black;　　　　　　　　// 已经完成的进度 IE高版本(10,11)
    }

    progress::-webkit-progress-bar {
        　　background-color: red;      // 整个进度条的背景 谷歌
    }

    progress::-webkit-progress-value {
        　　background-color: black;   // 已经完成的进度 谷歌
    }

    progress::-moz-progress-bar {
        　　background-color: black;  //  已经完成的进度 火狐
    }
</style>

<progress class="processbar" id="processbar" max="100" value="5"></progress><label id="processvalue"></label>

<input type="button" name="" value="重来一次" onclick="resetprocess()" />


<script>
    stepprocessbar();
    // 进度条增长
    function stepprocessbar() {
        var pb = document.getElementById("processbar");
        pb.value = pb.value + 1;

        // 进度显示label
        var processlabel = document.getElementById("processvalue");
        processlabel.innerText= pb.value + '%';
        processlabel.textContent = pb.value + '%';// FF 不支持innerText

        if (pb.value < 100) {
            setTimeout(function () {
                stepprocessbar();
            }, 50)
        }
    }
    // 重置进度条
    function resetprocess() {
        var pb = document.getElementById("processbar");
        if (pb.value != 100) return;
        document.getElementById("processbar").value = 0;
        stepprocessbar();
    }

</script>


<%--<form id="form1" enctype="multipart/form-data" method="post" action="testupload3">--%>
    <%--<div class="row">--%>
        <%--<label for="fileToUpload">Select a File to Upload</label><br />--%>
        <%--<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected()"/>--%>
    <%--</div>--%>
    <%--<div id="fileName"></div>--%>
    <%--<div id="fileSize"></div>--%>
    <%--<div id="fileType"></div>--%>
    <%--<div class="row">--%>
        <%--<input type="button" onclick="uploadFile()" value="Upload" />--%>
    <%--</div>--%>
    <%--<div id="progressNumber"></div>--%>
<%--</form>--%>

<%--<script type="text/javascript">--%>

    <%--var inputElement3 = document.getElementById("fileToUpload");--%>
    <%--inputElement3.addEventListener("change", handleFiles3, false);--%>

    <%--function handleFiles3(){--%>
        <%--var fileList = this.files;--%>
        <%--var dd = document.getElementById('content');--%>
        <%--for( var i = 0 ; i < fileList.length ; i++ ){--%>
            <%--dd.innerHTML += fileList[i].name+"<br>";--%>
        <%--}--%>
    <%--}--%>

    <%--function fileSelected() {--%>
        <%--var file = document.getElementById('fileToUpload').files[0];--%>
        <%--if (file) {--%>
            <%--var fileSize = 0;--%>
            <%--if (file.size > 1024 * 1024)--%>
                <%--fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';--%>
            <%--else--%>
                <%--fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';--%>

            <%--document.getElementById('fileName').innerHTML = 'Name: ' + file.name;--%>
            <%--document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;--%>
            <%--document.getElementById('fileType').innerHTML = 'Type: ' + file.type;--%>
        <%--}--%>
    <%--}--%>

    <%--function uploadFile() {--%>
        <%--var fd = new FormData();--%>
        <%--fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);--%>
        <%--var xhr = new XMLHttpRequest();--%>
        <%--xhr.upload.addEventListener("progress", uploadProgress, false);--%>
        <%--xhr.addEventListener("load", uploadComplete, false);--%>
        <%--xhr.addEventListener("error", uploadFailed, false);--%>
        <%--xhr.addEventListener("abort", uploadCanceled, false);--%>
        <%--xhr.open("POST", "testupload3");--%>
        <%--xhr.send(fd);--%>
    <%--}--%>

    <%--function uploadProgress(evt) {--%>
        <%--if (evt.lengthComputable) {--%>
            <%--var percentComplete = Math.round(evt.loaded * 100 / evt.total);--%>
            <%--document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';--%>
        <%--}--%>
        <%--else {--%>
            <%--document.getElementById('progressNumber').innerHTML = '无法计算';--%>
        <%--}--%>
    <%--}--%>

    <%--function uploadComplete(evt) {--%>
        <%--/* 当服务器响应后，这个事件就会被触发 */--%>
        <%--alert(evt.target.responseText);--%>
    <%--}--%>

    <%--function uploadFailed(evt) {--%>
        <%--alert("上传文件发生了错误尝试");--%>
    <%--}--%>

    <%--function uploadCanceled(evt) {--%>
        <%--alert("上传被用户取消或者浏览器断开连接");--%>
    <%--}--%>
<%--</script>--%>